<template>
    <div class="box">
        <el-menu :default-active="activeIndex" background-color="#8f8f8f" text-color="#fff" active-text-color="#ffd04b"
            class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect">
            <el-menu-item index="0">
                <img style="width: 60px" src="../../assets/logo.png" alt="Element logo" />
                <div class="box-header">社区总览系统</div>
            </el-menu-item>
            <!-- <el-menu-item>
                <div @click="addMessageDialog()" :icon="ChatLineRound" type="primary" text bg class="addUser">
                    <el-icon :size="20">
                        <ChatLineRound />
                    </el-icon>
                    留言板
                </div>
            </el-menu-item> -->
            <el-menu-item index="6">
                <template #title>首页</template>
            </el-menu-item>
            <el-menu-item index="1">
                <el-icon>
                    <Shop />
                </el-icon>
                <template #title>商超信息</template>
            </el-menu-item>
            <el-menu-item index="2">
                <el-icon>
                    <HomeFilled />
                </el-icon>
                <template #title> 学校信息</template>
            </el-menu-item>
            <el-menu-item index="3">
                <el-icon>
                    <OfficeBuilding />
                </el-icon>
                <template #title>医院信息</template>
            </el-menu-item>
            <el-menu-item index="4">
                <el-icon><icon-menu /></el-icon>
                <template #title> 维修信息</template>
            </el-menu-item>
            <el-menu-item index="5">
                <el-icon>
                    <ChatLineRound />
                </el-icon>
                <template #title> 投诉和留言板</template>
            </el-menu-item>
            <div class="flex-grow" />
            <el-menu-item index="2-1">后台</el-menu-item>
            <el-menu-item index="2-1">{{ infoStore.$state.info.username }}</el-menu-item>
        </el-menu>
        <div class="box-body">
            <div v-if="currentTab">
                <component :is="currentTab"></component>
            </div>
            <div v-else>
                <el-carousel :interval="2000" type="card" height="300px">
                    <el-carousel-item v-for="item in lunboImgs" :key="item.url">
                        <img :src="item.url" alt="暂无" style="width: 100%;height: 100%;">
                    </el-carousel-item>
                </el-carousel>
                <div class="box-body_message">
                    <img src="../../assets/commit-img.jpg" alt="">
                </div>
                <div class="box-body_message2">
                    <div class="box-body_message2_title">
                        <div style="font-weight:900">社区资讯</div>
                        <div v-for="(item, index) in messageList" :key="index">
                            <div class="box-body_message2_title_content" @click="findRoleInfo(item.id!)">
                                <div style="flex: 1;"> {{ (index + 1) + '、' + item.title }}</div>
                                <div style="width:220px">{{ item.publishTime }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="box-body_message2_title2">
                        <div style="height: 34px;background-color: #57a9ff;padding: 5px;">
                            <span style="color: white;font-size: 24px;font-weight: 800;">社区百科</span>
                        </div>
                        <div class="isHover" style="padding: 15px 10px;background: #d5e9ff;">
                            <strong style="font-size: 20px;">第七次全国人口普查</strong>
                            <div style="font-size: 17px;">第七次全国人口普查从2020年11月1日到12月10日进行入户登记。</div>
                        </div>
                        <div class="isHover" style="padding: 15px 10px;background: #eef6ff;">
                            <strong style="font-size: 20px;">民法典</strong>
                            <div style="font-size: 17px;">被誉为“社会生活的百科全书”，这部法律自2021年1月1日起施行。</div>
                        </div>
                        <div style="padding: 15px 10px;background: #cce2f5;">
                            <strong style="font-size: 20px;">社区工作者主要是做什么的？</strong>
                            <div style="font-size: 17px;">被誉为“社会生活的百科全书”，这部法律自2021年1月1日起施行。</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="box-footer">
        </div>
    </div>

    <!-- 查看详情弹框 -->
    <el-dialog v-model="dialogHost" :title="dialogHostTitle">
        <div>
            <div style="text-align: center;">
                <h1>{{ messageModalData.title }}</h1>
            </div>
            <div class="zuozhe">
                <span>作者： {{ messageModalData.author + ' ' }}</span>
                <span>浏览量： {{ messageModalData.views + ' ' }}</span>
                <span>{{ messageModalData.publishTime }}</span>
            </div>
            <div class="messageContent">
                {{ messageModalData.content }}
            </div>
            <div v-for="fit in messageModalData.pic" :key="fit" class="block"
                style="display: flex;flex-wrap: wrap;margin: 8px;">
                <el-image style="width: 400px; height: 400px" :src="fit" :fit="'contain'"><template #error>
                        <div style="width: 100%;height: 100%;display: flex;align-items: center;">
                            无图片
                        </div>
                    </template></el-image>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogHost = false">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogHost1" :title="dialogHostTitle">
        <el-form :model="addHsotForm">
            <div>
                <el-form-item label="申请人:" :label-width="formLabelWidth" clearable required>
                    <el-input v-model="addHsotForm.applyName" autocomplete="off" placeholder="请输入申请人"
                        :disabled="!isReadonlyHandler" />
                </el-form-item>
                <el-form-item label="申请原因:" :label-width="formLabelWidth" clearable required>
                    <el-input v-model="addHsotForm.applyReason" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                        placeholder="请输入申请原因" :disabled="!isReadonlyHandler" />
                </el-form-item>
                <el-form-item label="图片:" :label-width="formLabelWidth" clearable v-if="isReadonlyHandler">
                    <el-upload v-model:file-list="fileList" :http-request="updataImg" :limit="1"
                        :headers="{ 'Content-Type': 'multipart/form-data' }" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-form-item>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogHost1 = false">取消</el-button>
                <el-button type="primary" @click="addHostSubmit()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogHost2" :title="dialogHostTitle">
        <el-form :model="messageRef">
            <div>
                <el-form-item label="留言类型:" :label-width="formLabelWidth" clearable required>
                    <el-select v-model="messageRef.isMessage" placeholder="Select" size="large" style="width: 240px">
                        <el-option key="1" label="留言" :value="true" />
                        <el-option key="2" label="投诉" :value="false" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="messageRef.isMessage ? '留言信息' : '投诉信息'" :label-width="formLabelWidth" clearable
                    required>
                    <el-input v-model="addHsotForm.applyReason" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                        :placeholder="messageRef.isMessage ? '请输入留言信息' : '请输入投诉信息'" :disabled="!isReadonlyHandler" />
                </el-form-item>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogHost2 = false">取消</el-button>
                <el-button type="primary" @click="addMessageSubmit()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    ChatLineRound,
    Shop,
    HomeFilled,
    OfficeBuilding,
    Menu as IconMenu,
} from '@element-plus/icons-vue';
import lunbo1 from '../../assets/lunbo/lunbo1.webp'
import lunbo2 from '../../assets/lunbo/lunbo2.jpeg'
import lunbo3 from '../../assets/lunbo/lunbo3.png'
import lunbo4 from '../../assets/lunbo/lunbo4.jpg'
import lunbo5 from '../../assets/lunbo/lunbo5.jpg'
import lunbo6 from '../../assets/lunbo/lunbo6.webp'
import { ElMessage, UploadProps } from 'element-plus';
import { Ref, onMounted, reactive, ref, shallowRef, toValue, unref } from 'vue'
import {
    reqFindCommunityList,
    reqFindCommunityNewsById,
    reqUploadPic
} from '@/api/message';
import { addCommunityNewsParams, modifyCommunityNewsParams } from '../message/type'
import { useRouter } from 'vue-router'
import { AddParams } from '../repair/types'
import { reqaddSupermarket, reqAddMessage } from '@/api/repair';
import { useStore } from '@/pinna';
import supermarket from '../supermarket/supermarket.vue'
import repair from '../repair/repair.vue'
import school from '../school/school.vue'
import hospital from '../hospital/hospital.vue'
import reqMessageAndComplain from '../reqMessageAndComplain/reqMessageAndComplain.vue'
const router = useRouter();
const infoStore = useStore()
const activeIndex = ref('1')
const currentTab = shallowRef()
const tabs = {
    'supermarket': supermarket,
    'repair': repair,
    'school': school,
    'hospital': hospital,
    'reqMessageAndComplain': reqMessageAndComplain
}
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
    switch (key) {
        case '2-1':
            if (localStorage.getItem('isLogin') == 'true') {
                router.replace({
                    name: 'Home',
                    query: {
                        path: 2
                    }
                })
            } else {
                router.push('/login')
            }
            break;
        case '1':
            currentTab.value = tabs['supermarket']
            break;
        case '2':
            currentTab.value = tabs['school']
            break;
        case '3':
            currentTab.value = tabs['hospital']
            break;
        case '4':
            currentTab.value = tabs['repair']
            break;
        case '5':
            currentTab.value = tabs['reqMessageAndComplain']
            break;
        case '6':
            currentTab.value = ''
            break;
    }
}
// 添加资讯
const formLabelWidth = '100px'
let fileList = ref<any[]>([])
let dialogHost1 = ref(false)
let isReadonlyHandler = ref(true)
const addHsotForm: Ref<AddParams> = ref({
    applyName: "",
    applyReason: "",
    applyPic: "",
    remark: '',
    isAccepted: '0'
})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const messageRef = ref({
    isMessage: true,
    message: ''
})
const dialogHost2 = ref(false)

const updataImg = async (data: any) => {
    await reqUploadPic({ image: data.file }).then((res: any) => {
        addHsotForm.value.applyPic = res.data
    })
}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    addHsotForm.value.applyPic = ''
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

const addHostSubmit = async () => {
    await reqaddSupermarket({ ...unref(addHsotForm), isAccepted: +unref(addHsotForm).isAccepted }).then((res: any) => {
        const { code } = res

        if (code === 200) {
            dialogHost1.value = false
            ElMessage({
                message: '添加成功',
                type: 'success'
            })

        } else {
            const message = res.msg || '请求异常'
            ElMessage({
                message: message,
                type: 'warning'
            })
        }
    })
}
const addMessageSubmit = async () => {
    console.log({ ...unref(messageRef) });

    await reqAddMessage({ ...unref(messageRef) }).then((res: any) => {
        const { code } = res

        if (code === 200) {
            dialogHost2.value = false
            ElMessage({
                message: messageRef.value.isMessage ? '留言成功' : '投诉成功',
                type: 'success'
            })

        } else {
            const message = res.msg || '请求异常'
            ElMessage({
                message: message,
                type: 'warning'
            })
        }
    })
}

// 轮播
const lunboImgs = reactive([
    { url: lunbo1 },
    { url: lunbo2 },
    { url: lunbo3 },
    { url: lunbo4 },
    { url: lunbo5 },
    { url: lunbo6 },
])

// 资讯
const messageList = ref<Partial<modifyCommunityNewsParams>[]>([])
const reqMessageList = async () => {
    await reqFindCommunityList({
        pageNo: toValue(1),
        pageSize: toValue(7),
    }).then((res: any) => {
        const { code, data, } = res

        if (code === 200) {
            messageList.value = data
        } else {
            ElMessage({
                message: '请求异常',
                type: 'warning'
            })
        }
    })
}
onMounted(() => {
    reqMessageList()
})
const messageModalData = ref<addCommunityNewsParams>({
    title: '',
    content: '',
    author: 'string',
    views: 1,
    pic: []
})
let dialogHost = ref(false)
const imgList = ref([])
let dialogHostTitle = ref('')
const findRoleInfo = async (id: string) => {
    await reqFindCommunityNewsById({ id }).then((res: any) => {
        const { data } = res
        console.log(data);
        messageModalData.value = data
        imgList.value = data.pic || []

        dialogHostTitle.value = data.title
        dialogHost.value = true
    })
}
</script>

<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
    height: 200px;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.flex-grow {
    flex-grow: 1;
}

.zuozhe {
    text-align: center;
    font-size: 14px;
    color: #999;
    padding-bottom: 10px;
    padding-right: 20px;

    .content {
        display: inline-block;
        margin-right: 15px;
    }
}

.messageContent {
    font-size: 16px;
    line-height: 2;
    text-align: justify;
    color: #434343;
    padding-top: 15px;
}

.isHover:hover {
    color: red;
    cursor: pointer;
}


.box {
    width: 100%;
    height: 100vh;
    background-color: rgba(229, 229, 229, 0.6901960784);
    overflow: auto;

    &-header {
        line-height: 60px;
        display: flex;
        align-items: center;
        font-size: 30px;
        font-family: 楷体;
        color: rgb(249, 209, 7);
        font-weight: 1000;
    }

    &-body {
        width: 95%;
        padding: 23px;
        overflow: auto;
        margin: 0 auto;

        &_message {
            width: 100%;
            height: 100px;
            background: #f1f1f1;
            text-align: center;
            margin-top: 20px;

            img {
                border: none;
                vertical-align: bottom;
            }
        }

        &_message2 {
            width: 100%;
            font-family: '楷体';
            margin: 0 auto;
            font-size: 19px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-around;

            &_title {
                // overflow: auto;
                width: 100%;
                height: 400px;
                background-color: #f1f1f1;
                padding: 30px;

                &_content {
                    display: flex;
                    padding: 8px;
                    margin: 8px;
                    align-items: center;
                    justify-content: space-between;

                    div {
                        margin-left: 7px;
                    }
                }

                &_content:hover {
                    cursor: pointer;
                    color: red;
                    margin-left: 5px;
                }
            }

            &_title2 {
                width: 36%;
                height: 400px;
                display: flex;
                flex-direction: column;
            }
        }
    }

    &-footer {
        // margin-top: 20px;
        // height: 500px;
        margin-bottom: 30px;
    }
}
</style>
